import React, {
    PureComponent
} from 'react';

import {
    View,
    StyleSheet
} from 'react-native';

import {
    Actions
} from 'react-native-router-flux';

import {
    Arrow,
    Layout,
    ListView
} from './../../components';

import connect from './../../utils/connect';
import commonAction from './../../state/actions/common';
import * as commonTypes from './../../state/types/common';

interface Props {
    common:any,
    userId:number,
    videoId:number,
    commonActions:any
    backUrl:string
}

@connect([`common`],{
    commonActions:commonAction
})
class Report extends PureComponent<Props> {

    get Types() {
        const {
            common
        } = this.props;
        const {
            reportTypes=[]
        } = common;
        return reportTypes;
    }

    get commonActions() {
        const {
            commonActions
        } = this.props;
        return commonActions;
    }

    private onRefresh = async (done:Function) => {
        let _list = [];
        let _success = true;

        try {
            _list = await this.commonActions[
                commonTypes.getReportTypes
            ]();
        }
        catch (e) {
            _success = false
        }
        done(_list,_success)
    }

    private _toNext = ({ typeId }:any) => {
        const {
            videoId,
            userId,
            backUrl
        } = this.props;

        const _props = {
            typeId:typeId,
            videoId:videoId,
            userId:userId,
            backUrl:backUrl
        }

        Actions.push(`/report/submit`,_props)
    }

    private _renderItem=({item}:any)=>{
        return (
            <Arrow
                style={styles.itemStyle}
                title={item.typeName}
                onPress={() => this._toNext(item)}
            />
        )
    }

    render() {
        return (
            <Layout
                title="Report"
                scroll={false}
                padding={false}
            >
                <ListView
                    data={this.Types}
                    onLoadTop={this.onRefresh}
                    renderItem={this._renderItem}
                    contentContainerStyle={styles.contentContainerStyle}
                />
            </Layout>
        )
    }
}

export default Report;

const styles =  StyleSheet.create({
    contentContainerStyle:{
        paddingHorizontal:0
    },
    itemStyle:{
        paddingHorizontal:16
    }
}) as any